<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport"
		  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
	<link rel="stylesheet"
		  href="${contextPath}/static/statistics/css/mui.min.css">
	<link rel="stylesheet"
		  href="${contextPath}/static/statistics/css/app.css" />
	<link rel="stylesheet"
		  href="${contextPath}/static/statistics/css/mui.picker.min.css" />
	<link rel="stylesheet"
		  href="${contextPath}/static/statistics/css/mui.dtpicker.css" />
	<script type="text/javascript" charset="utf-8">

	</script>
	<style type="text/css">
		.chart {
			height: 200px;
			margin: 0;
			padding: 1px;
		}

		h5 {
			margin-top: 30px;
			font-weight: bold;
			text-align: center;
		}

		h5:first-child {
			margin-top: 15px;
		}
	</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">
	</a>
	<h1 class="mui-title"
		style="font-size: smaller; font-family: 'blackadder itc';">自律小组</h1>
</header>
<div class="mui-content">
	<div class="mui-content-padded">
		<h5>购进量</h5>
		<div class="chart" id="barChart"></div>
		<h5>结构</h5>
		<div class="chart" id="lineChart"></div>
		<h5>品牌宽度</h5>
		<div class="chart" id="pieChart"></div>
		<h5>单种货品购进前5</h5>
		<div class="chart" id="top10Chart"></div>
	</div>

</div>
<script src="${contextPath}/static/statistics/js/mui.min.js"></script>
<script src="${contextPath}/static/statistics/js/jquery.js"></script>
<script src="${contextPath}/static/statistics/js/echarts-all.js"></script>
<script>

    var userid = "${userid}";
    var userId = "${userId}";
    var getDate = function(method, month) {
        var dt;
        $.ajax({
            type : "post",
            url : "${contextPath}/Honest/" + method,
            async : false,
            data : {
                "userid" :userid,
                "month" : month,
                "userId" :userId
            },
            success : function(data) {
                dt = data.data;
            },
            error : function() {
                console.log('fail')
            }
        });
        return dt;
    }
    var getbatChart = function(chartType, method) {
        var dt = [];
        dt = getDate(method, 1);
        var ldt = [];
        ldt = getDate(method, 2);
        var xdata = [];
        var ydata1 = [];
        var ydata2 = [];
        $.each(dt, function(n, value) {
            xdata.push(value.CUST_NAME);
            ydata1.push(value.TOTAL);
        });
        $.each(ldt, function(n, value) {
            ydata2.push(value.TOTAL);
        });
        var chartOption = {
            noDataLoadingOption : {
                text : '暂无数据展示',
                effect : 'bubble',
                effectOption : {
                    effect : {
                        n : 0
                    }
                }
            },
            legend : {
                data : [ '本月数据', '上月数据' ]
            },
            grid : {
                x : 40,
                x2 : 10,
                y : 30,
                y2 : 25
            },
            toolbox : {
                show : false,
                feature : {
                    mark : {
                        show : true
                    },
                    dataView : {
                        show : true,
                        readOnly : false
                    },
                    magicType : {
                        show : true,
                        type : [ 'line', 'bar' ]
                    },
                    restore : {
                        show : true
                    },
                    saveAsImage : {
                        show : true
                    }
                }
            },
            calculable : false,
            xAxis : [ {
                type : 'category',
                data : xdata,
                axisLabel: {
                    interval:0,
                    rotate:0
                }
            } ],
            yAxis : [ {
                type : 'value',
                splitArea : {
                    show : true
                }
            } ],
            series : [ {
                name : '本月数据',
                type : chartType,
                itemStyle : {
                    normal: {
                        label : {
                            show: true,
                            position: 'top'}
                    }
                },
                data : ydata1
            }, {
                name : '上月数据',
                type : chartType,
                itemStyle : {
                    normal: {
                        label : {
                            show: true,
                            position: 'top'}
                    }
                },
                data : ydata2
            } ]


        };
        return chartOption;
    };

    var byId = function(id) {
        return document.getElementById(id);
    };

    var barChart = echarts.init(byId('barChart'));
    barChart.setOption(getbatChart('bar', 'sales'));

    var lineChart = echarts.init(byId('lineChart'));
    lineChart.setOption(getbatChart('bar', 'aveprice'));

    var pieChart = echarts.init(byId('pieChart'));
    pieChart.setOption(getbatChart('bar', 'brandwidth'));

    var top10Chart = echarts.init(byId('top10Chart'));
    top10Chart.setOption(getbatChart('bar', 'topsales'));
</script>
</body>
</html>